<!-- 网站信息 -->

<template>
    <div class="website-information">
        <el-form class="ls-form" :model="formData" label-width="124px">

            <el-card class="!border-none mb-4">
                <div class="font-medium mb-7" style="font-size:25px;font-weight:900;">公众号信息</div>
                <el-form-item label="公众号名称" prop="name">
                    <div class="w-80">
                        <el-input class="w-[280px]" placeholder="请输入公众号名称" v-model="formData.name" clearable />
                    </div>
                </el-form-item>
                <el-form-item label="公众号appid" prop="name">
                    <div class="w-80">
                        <el-input class="w-[280px]" placeholder="请输入公众号appid" v-model="formData.appid" clearable />
                    </div>
                </el-form-item>
                <el-form-item label="公众号AppSecret" prop="name">
                    <div class="w-80">
                        <el-input class="w-[280px]" placeholder="请输入公众号AppSecret" v-model="formData.app_secret"
                            clearable />
                    </div>
                </el-form-item>
            </el-card>
            <el-card class="!border-none mb-4">
                <div class="font-medium mb-7" style="font-size:25px;font-weight:900;">
                    服务器配置
                    <span style="color:red;font-weight:900;" v-if="formData.url_status == 0">
                        未接入
                    </span>
                    <span style="color:red;font-weight:900;" v-if="formData.url_status == 1">
                        已接入
                    </span>
                </div>

                <el-alert description="登录微信公众平台，点击设置与开发>公众号设置>基本配置" type="info" :closable="false" />
                <div>
                    <span style="color:red;font-weight:900;">
                        服务器url怎么配置
                    </span>
                    <el-button type="primary" link @click="dialogVisible = true">
                        查看
                    </el-button>
                </div>
                <div>
                    <span style="color:red;font-weight:900;">
                        登录微信公众平台去获取
                    </span>
                    <el-button type="primary" link @click="openwx">
                        立即登录
                    </el-button>
                </div>
                <el-form-item label="服务器地址(URL)" style="margin-top:30px;">
                    <div style="display:flex;">
                        <div class="w-80">
                            <el-input class="w-[280px]" placeholder="请输入服务器地址(URL)" v-model="formData.url" clearable
                                readonly>
                                <template #append>
                                    <el-button v-copy="formData.url">复制</el-button>
                                </template>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="令牌(Token)">
                    <div style="display:flex;">
                        <div class="w-80">
                            <el-input class="w-[280px]" placeholder="请输入令牌(Token)" v-model="formData.token" clearable>
                                <template #append>
                                    <el-button v-copy="formData.token">复制</el-button>
                                </template>
                            </el-input>
                        </div>
                        <div style="margin-left:10px;">
                            <el-button @click="changeing(32)" link type="primary">重新生成</el-button>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="消息加解密密钥(E ncodingAESKey)" style="margin-top:30px;">
                    <div style="display:flex;">
                        <div class="w-80">
                            <el-input class="w-[280px]" placeholder="请输入消息加解密密钥(EncodingAESKey)"
                                v-model="formData.encoding_aeskey" clearable>
                                <template #append>
                                    <el-button v-copy="formData.encoding_aeskey">复制</el-button>
                                </template>
                            </el-input>
                        </div>
                        <div style="margin-left:10px;">
                            <el-button @click="changeing(43)" link type="primary">重新生成</el-button>
                        </div>
                    </div>
                </el-form-item>

            </el-card>
            <el-card class="!border-none mb-4">
                <div class="font-medium mb-7" style="font-size:25px;font-weight:900;">功能设置</div>
                <el-alert description="登录微信公众平台，点击设置与开发>公众号设置>功能设置" type="info" :closable="false" />
                <div>
                    <span style="color:red;font-weight:900;">
                        域名怎么配置
                    </span>
                    <el-button type="primary" link @click="gn = true">
                        查看
                    </el-button>
                </div>
                <div>
                    <span style="color:red;font-weight:900;">
                        登录微信公众平台去获取
                    </span>
                    <el-button type="primary" link @click="openwx">
                        立即登录
                    </el-button>
                </div>
                <el-form-item label="JS接口安全域名" style="margin-top:20px;">
                    <div class="w-80">
                        <el-input class="w-[280px]" placeholder="请输入" v-model="hostname" clearable readonly>
                            <template #append>
                                <el-button v-copy="hostname">复制</el-button>
                            </template>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item label="网页授权域名">
                    <div class="w-80">
                        <el-input class="w-[280px]" placeholder="请输入" v-model="hostname" clearable readonly>
                            <template #append>
                                <el-button v-copy="hostname">复制</el-button>
                            </template>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item label="业务域名">
                    <div class="w-80">
                        <el-input class="w-[280px]" placeholder="请输入" v-model="hostname" clearable readonly>
                            <template #append>
                                <el-button v-copy="hostname">复制</el-button>
                            </template>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item label="ip">
                    <div class="w-80">
                        <el-input class="w-[280px]" placeholder="请输入ip" v-model="formData.ip" clearable readonly>
                            <template #append>
                                <el-button v-copy="formData.ip">复制</el-button>
                            </template>
                        </el-input>
                    </div>
                </el-form-item>
            </el-card>
            <el-card class="!border-none mb-4">
                <div class="font-medium mb-7" style="font-size:25px;font-weight:900;">验证文件</div>
                <el-form-item label="上传验证文件" prop="empower" style="margin-top: 10px">
                    <div class="w-80">
                        <el-upload ref="uploadRef" class="upload-demo" :action="uploadAction" :headers="uploadToken"
                            :on-success="successHandle" :before-upload="uploadHanlde" :limit="1">
                            <el-input class="w-[280px]" :placeholder="formData.empower
                                " clearable readonly>
                                <template #append>
                                    <el-button>上传</el-button>
                                </template>
                            </el-input>
                        </el-upload>
                    </div>
                    <el-alert description="上传以.txt结尾的文件" type="info" :closable="false" />
                </el-form-item>
            </el-card>
        </el-form>
        <el-card class="!border-none mb-4">
            <div class="font-medium mb-7" style="font-size:25px;font-weight:900;">白名单设置</div>
            <el-alert description="温馨提示：不添加域名则不做任何限制，添加后仅列表内域名可以调用接口，域名填写示例：www.baidu.com" type="error"
                :closable="false" />
            <div style="margin-top:20px;">
                <el-button type="primary" @click="handleAdd()">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    新增白名单
                </el-button>
            </div>
            <el-table ref="tableRef" class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists"
                row-key="id">
                <el-table-column label="id" prop="id" min-width="100" />
                <el-table-column label="添加时间" prop="create_time" min-width="150" show-overflow-tooltip />
                <el-table-column label="标题" prop="title" min-width="150" show-overflow-tooltip />
                <el-table-column label="域名" prop="domain" min-width="150" show-overflow-tooltip />
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="handleEdit(row)">
                            编辑
                        </el-button>
                        <el-button type="danger" link @click="handleDelete(row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex mt-4 justify-end">
                <paginat v-model="pager" @change="getLists" />
            </div>
            <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
        </el-card>
        <el-card class="!border-none mb-4">
            <h1>
                微信公众平台多平台授权登录【登录、获取openid等】
            </h1>
            <p>
                微信公众号后台默认只能授权2个网页域名，用本系统突破这个限制，用同一个公众号对接无限个平台。
            </p>
            <h3>
                使用方法：
            </h3>
            <p>
                将业务代码中的
                <code>
            https://open.weixin.qq.com
        </code>
                替换成
                <code>
            {{ hostnameing }}
        </code>
                <el-button type="primary" link v-copy="hostnameing">
                    复制
                </el-button>
            </p>
            <h3>
                代码查找修改方法：
            </h3>
            <p>
                打包项目代码下载到电脑本地使用代码编译软件：
            </p>
            <p>
                vscode下载地址：https://vscode.github.net.cn/
                <el-button type="primary" link v-copy="'https://vscode.github.net.cn/'">
                    复制
                </el-button>
            </p>
            <p>
                全局搜索https://open.weixin.qq.com，搜索后替换为 {{ hostnameing }}
                <el-button type="primary" link v-copy="hostnameing">
                    复制
                </el-button>
            </p>
            <p>
                修改示例：找到微信登录代码后
                <span style="color:red;">
                    【参考案例：https://open.weixin.qq.com/connect/oauth2/authorize?appid=】
                </span>
                回到宝塔找到对应文件进行修改并保存，不要改其他微信接口的域名。
            </p>
            <p>
                <img src="@/assets/images/edit.png" alt="" style="width:100%;" />
            </p>
            <h1>
                【服务器域名接入】微信消息事件转发功能
            </h1>
            <p>
                微信公众号后台默认只能添加1个服务器域名，用本系统突破这个限制，用同一个公众号接入无限个平台。如用户关注事件、用户发送的消息等，可以同时发送给多个服务器站点。
            </p>
            <h3>
                使用方法：
            </h3>
            <p>
                服务器域名配置到微信公众平台官方后台，然后在系统内新增其他服务器域名。
            </p>
            <p>
            </p>
        </el-card>
        <footer-btns>
            <el-button type="primary" @click="handleSubmit">保存</el-button>
        </footer-btns>
        <el-dialog v-model="dialogVisible" width="80%">
            <img src="../../assets/images/url.png" alt="" style="width:100%;" @click="dialogVisible = false" />
        </el-dialog>
        <el-dialog v-model="gn" width="80%">
            <img src="../../assets/images/gn.png" alt="" style="width:100%;" @click="dialogVisible = false" />
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="webInformation">
import { editWechat, getWechatInfo } from '@/api/application/gzh/index'
const dialogVisible = ref(false)
const gn = ref(false)
import { usePaging } from '@/hooks/usenew'
import feedback from '@/utils/feedback'
const route = useRoute()
const hostnameing = location.protocol + "//" + location.hostname;
// 表单数据
const formData = reactive({
    appid: "",
    app_secret: "",
    name: "",
    token: "",
    encoding_aeskey: "",
    ip: "",
    url: "",
    id: route.query.id,
    empower: "",
    url_status: 0
});


import { getToken } from "@/utils/auth";
const uploadAction = '/adminapi/setting.wechat_open/upload';
// const uploadAction = `https://yx.xiaojiangy.cn/adminapi/setting.wechat_open/upload`;
const uploadToken = ref<uploadTokenObj>({
    token: getToken(),
});
const uploadHanlde = async (file: any) => {
    let acceptFileType = ['txt']

    let type = file.name.split(".").slice(-1)[0].toLowerCase()

    console.log(file);

    if (!acceptFileType.includes(type)) {
        feedback.msgError("上传文件失败,请上传正确的文件格式")
        return false
    }
    return true;
}
const successHandle: UploadProps["onSuccess"] = (response, uploadFile) => {
    if (response.code == 0) {
        feedback.msgError(response.msg)
        return false
    } else {
        feedback.msgSuccess(response.msg)
    }
    formData.empower = response.data.file;
};




const chars = reactive('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz')

const hostname = location.hostname;
// 获取信息
const getData = async () => {
    const data = await getWechatInfo({ id: route.query.id });
    for (const key in formData) {
        //@ts-ignore
        formData[key] = data[key];
    }
};

// 设置信息
const handleSubmit = async () => {
    if (formData.token.length != 32) {
        feedback.msgError("令牌长度应为32位,请重新输入")
        return false
    }
    if (formData.encoding_aeskey.length != 43) {
        feedback.msgError("消息加解密秘钥长度应为43位,请重新输入")
        return false
    }
    await editWechat(formData);
    getData();
};
// 打开微信公众平台
const openwx = () => {
    window.open('https://mp.weixin.qq.com/')
}
const changeing = (num: any) => {
    var result = ''
    for (let i = 0; i < num; i++) {
        const randomIndex = Math.floor(Math.random() * chars.length);
        result += chars[randomIndex];
    }
    console.log(result)
    if (num == 32) {
        formData.token = result
    } else if (num == 43) {
        formData.encoding_aeskey = result
    }
    feedback.msgSuccess("生成成功,请手动保存")
}
getData();


import { domainList, delDomain } from '@/api/application/gzh/index'
import EditPopup from './ipedit.vue'
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const showEdit = ref(false)
const formDataing = reactive({
    wechat_id: route.query.id
})
const { pager, getLists } = usePaging({
    fetchFun: domainList,
    params: formDataing
})

const handleAdd = async (id?: number) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('add')
}
const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.getDetail(data)
}
const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    await delDomain({ id })
    getLists()
}
getLists()
</script>


<style lang="scss" scoped>
h1 {
    font-size: 2em;
    padding-bottom: .3em;
    border-bottom: 1px solid rgb(216, 222, 228);
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 20px;
}

h3 {
    font-weight: 600;
    font-size: 1.25em;
    margin-top: 24px;
    margin-bottom: 16px;
    line-height: 1.25;
}

p {
    margin-bottom: 16px;
}

code {
    padding: .2em .4em;
    margin: 0;
    font-size: 85%;
    background-color: rgba(175, 184, 193, 0.2);
    border-radius: 6px;
}
</style>
